<template>
    <div id="tmpl">
        <!-- &lt;!&ndash; 1.0 轮播图：mint-ui中的 swipe组件实现 &ndash;&gt;
             <mt-swipe :auto="2000">
              &lt;!&ndash; <mt-swipe-item>1</mt-swipe-item>
               &ndash;&gt;
               <mt-swipe-item v-for="item in list">
                   <img :src="item.img">
               </mt-swipe-item>
            </mt-swipe>

            &lt;!&ndash; 2.0 利用MUI的9宫格样式实现导航区域 &ndash;&gt;
            <div class="mui-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/news/newslist">
                                <span class="mui-icon mui-icon-home"></span>
                                <div class="mui-media-body">新闻资讯</div></router-link>
                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
                                <span class="mui-icon mui-icon-email">

                                </span>
                                <div class="mui-media-body">图片分享</div></router-link>
                         </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/goods/goodslist">
                                <span class="mui-icon mui-icon-chatbubble"></span>
                                <div class="mui-media-body">商品购买</div></router-link>

                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/feedback">
                                <span class="mui-icon mui-icon-location"></span>
                                <div class="mui-media-body">留言反馈</div></router-link>

                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/vide">
                                <span class="mui-icon mui-icon-search"></span>
                                <div class="mui-media-body">视频专区</div></router-link>

                         </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/callme">
                                <span class="mui-icon mui-icon-phone"></span>
                                <div class="mui-media-body">联系我们</div></router-link>
                        </li>

                    </ul>
            </div>

        </div>-->
        <!--轮播图-->
        <mt-swipe :auto="4000">
           <!-- <mt-swipe-item><img src="" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="" alt=""></mt-swipe-item>-->
            <mt-swipe-item v-for="item in message"><img :src="item.img" alt=""></mt-swipe-item>
        </mt-swipe>

        <!--九宫格-->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/news/newslist">
                        <span class="mui-icon mui-icon-home"></span>
                        <div class="mui-media-body">新闻资讯</div></router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email">

		                    </span>
                    <div class="mui-media-body">图片分享</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/goods/goodslist">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品购买</div></router-link>

                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/feedback">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div></router-link>

                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/vide">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">视频专区</div></router-link>

                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/callme">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div></router-link>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
    /*import common from '../kits/common.js';*/
    //按需倒入
    import { Toast } from 'mint-ui';
    /*import { Toast } from 'mint-ui';
     import common from '../kits/common.js';

     export default{
     data(){
     return {
     list:[]
     }
     },
     created(){
     // 当页面中的data和methods对象都创建完毕以后，就会自动调用created
     this.getimgs();
     },
     methods:{
     getimgs(){
     // 实现轮播组件中的数据请求
     // 1.0 确定url
     var url = common.apidomain + '/api/getlunbo';

     // 2.0 调用$http.get()
     this.$http.get(url).then(function(response){
     var data = response.body;
     //错误处理
     if(data.status != 0){
     Toast(data.message);
     return;
     }

     // 如果服务器返回的数据正常则赋值给list
     this.list = data.message;
     });
     }
     }
     }*/
    export default{
        data(){
            return {
                "message": [
                    /*{
                        "url": "http://www.itcast.cn/subject/phoneweb/index.html",
                        "img": "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
                    },
                    {
                        "url": "http://www.itcast.cn/subject/phoneweb/index.html",
                        "img": "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
                    }*/
                ]
            }
        },
//
        created:function(){/*var url = common.apidomain + '/api/getlunbo';*/
            //发送请求的时候http://不能掉
            this.$http.get("http://www.lovegf.cn:8899/api/getlunbo").then(function(response){
                console.log(response.body);
                if(response.body.status = 1){

                    Toast({
                        message: 'ajax数据请求成功',
                        position: 'middle',
                        duration: 8000
                    });

                }
                this.message=response.body.message
            })
        }
    }
</script>

<style scoped>
    .mint-swipe {
        height: 300px;
    }

    .mint-swipe-item img {
        width: 100%;
        height: 100%;
    }

    .mint-swipe-item {
        margin-top: 50px;
        background-color: red;
        width: 100%;
        height: 300px;
    }

    .mui-content, .mui-content ul {
        background-color: #fff;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border-right: 0px;
        border-bottom: 0px;
    }

    .mui-grid-view.mui-grid-9 {
        border-top: 0px;
        border-left: 0px;
    }

    .mui-icon-home::before, .mui-icon-email::before, .mui-icon-chatbubble::before, .mui-icon-location::before, .mui-icon-search::before, .mui-icon-phone::before {
        content: '';
        display: inline-block;
        height: 50px;
        width: 50px;
        /*round：
                背景图像自动缩放直到适应且填充满整个容器。（CSS3）
                space：
                背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）*/
        background-repeat: round;
    }

    .mui-icon-home:before {
        background-image: url(../../statics/imgs/1.png);
    }

    .mui-icon-email:before {
        background-image: url(../../statics/imgs/2.png);
    }

    .mui-icon-chatbubble:before {
        background-image: url(../../statics/imgs/3.png);
    }

    .mui-icon-location:before {
        background-image: url(../../statics/imgs/4.png);
    }

    .mui-icon-search:before {
        background-image: url(../../statics/imgs/5.png);
    }

    .mui-icon-phone:before {
        background-image: url(../../statics/imgs/6.png);
    }

    /*.mint-swipe{
        height: 300px;
    }
    .mint-swipe-item img{
        width: 100%;
    }
    .mint-swipe-item{
        background-color: red;
        width: 100%;
        height: 300px;
    }

    .mui-content,.mui-content ul{
        background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right:0px;
        border-bottom:0px;
    }
    .mui-grid-view.mui-grid-9{
        border-top:0px;
        border-left:0px;
    }
    .mui-icon-home:before,
    .mui-icon-email:before,
    .mui-icon-chatbubble:before,
    .mui-icon-location:before,
    .mui-icon-search:before,
    .mui-icon-phone:before{
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background-repeat: round;
    }

    .mui-icon-home:before{
        background-image: url(../../statics/imgs/1.png);
    }

    .mui-icon-email:before{
        background-image: url(../../statics/imgs/2.png);
    }
    .mui-icon-chatbubble:before{
        background-image: url(../../statics/imgs/3.png);
    }
    .mui-icon-location:before{
        background-image: url(../../statics/imgs/4.png);
    }
    .mui-icon-search:before{
        background-image: url(../../statics/imgs/5.png);
    }
    .mui-icon-phone:before{
        background-image: url(../../statics/imgs/6.png);
    }*/
  /*  {
    "status"
    :

    0
    ,
    "message"
    :[ {
    "url": "http://www.itcast.cn/subject/phoneweb/index.html", "img": "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
    }

    ,
    {
    "url"
    :
    "http://www.itcast.cn/subject/phoneweb/index.html"
    ,
    "img"
    :
    "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
    }
    ]
    }*/
</style>